<template>
  <div class="page-container">
    <div class="form-card">
      <h2 class="title">添加新任务</h2>
      <form @submit.prevent="submitForm" class="form-content">
        <!-- 任务名称 -->
        <div class="form-group">
          <label class="label">任务名称</label>
          <input
            v-model="form.title"
            type="text"
            class="input"
            required
            @keyup.enter="submitForm" 
          />
        </div>

        <!-- 任务描述 -->
        <div class="form-group">
          <label class="label">任务描述</label>
          <textarea
            v-model="form.description"
            class="input"
            rows="3"
          ></textarea>
        </div>

        <!-- 截止日期 -->
        <div class="form-group">
          <label class="label">截止日期</label>
          <input
            v-model="form.dueDate"
            type="datetime-local"
            class="input"
          />
        </div>

        <!-- 优先级 -->
        <div class="form-group">
          <label class="label">优先级</label>
          <select
            v-model="form.priority"
            class="input"
          >
            <option value="高">高</option>
            <option value="中">中</option>
            <option value="低">低</option>
          </select>
        </div>

        <!-- 标签 -->
        <div class="form-group">
          <label class="label">标签</label>
          <div class="tag-list">
            <span
              v-for="tag in availableTags"
              :key="tag"
              class="tag-badge"
            >
              {{ tag }}
            </span>
          </div>
          <div class="tag-input-row">
            <input
              v-model="tagsInput"
              type="text"
              class="input tag-input"
              placeholder="输入新标签并回车添加"
              @keyup.enter="addCustomTag" 
            />
            <button
              @click="addCustomTag"
              class="btn tag-btn"
            >
              添加标签
            </button>
          </div>
        </div>

        <!-- 提交按钮 -->
        <button
          type="submit"
          class="btn submit-btn"
        >
          提交任务
        </button>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const form = ref({
  title: '',
  description: '',
  dueDate: '',
  priority: '中',
  tags: []
})
const tagsInput = ref('')
const availableTags = ref(new Set())
const tasks = ref([]) // 任务数组

// 加载数据
const loadData = () => {
  const storedTasks = localStorage.getItem('tasks')
  tasks.value = storedTasks ? JSON.parse(storedTasks) : []
  
  const storedTags = localStorage.getItem('taskTags')
  if (storedTags) availableTags.value = new Set(JSON.parse(storedTags))
}

// 保存数据
const saveData = () => {
  localStorage.setItem('tasks', JSON.stringify(tasks.value))
  localStorage.setItem('taskTags', JSON.stringify([...availableTags.value]))
}

// 添加标签
const addCustomTag = () => {
  const tag = tagsInput.value.trim()
  if (tag) {
    availableTags.value.add(tag)
    tagsInput.value = ''
    saveData() // 保存标签
  }
}

// 提交任务
const submitForm = () => {
  const title = form.value.title.trim()
  if (!title) return // 验证标题

  const newTask = {
    id: Date.now(),
    ...form.value,
    tags: [...availableTags.value], // 转换为数组
    createdAt: new Date().toISOString(),
    completed: false,
    dueDate: form.value.dueDate ? new Date(form.value.dueDate).toISOString() : null
  }

  tasks.value.push(newTask) // 添加任务
  saveData() // 保存所有数据
  router.back() // 返回首页
}

onMounted(() => {
  loadData() // 组件加载时加载数据
})
</script>

<style scoped>
/* 设计系统变量 */
:root {
  --primary: #3b82f6;
  --gray-light: #e5e7eb;
  --gray-dark: #374151;
  --blue-light: #eff6ff;
  --blue-dark: #2563eb;
  --white: #fff;
  --black: #111827;
  --radius: 12px;
  --shadow: 0 8px 24px rgba(0,0,0,0.08);
  --transition: all 0.3s ease;
}

/* 页面布局 */
.add-task-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #eef2f7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  box-sizing: border-box;
  font-family: 'Microsoft YaHei', sans-serif;
}

/* 表单卡片 */
.form-card {
  width: 100%;
  max-width: 640px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--gray-light);
  padding: 2.5rem;
}

.form-card .card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-dark);
  margin-bottom: 1.5rem;
  text-align: center;
}

/* 表单布局 */
.task-form {
  display: grid;
  gap: 1.5rem;
}

.form-row {
  display: flex;
  gap: 1rem;
}

.flex-1 {
  flex: 1;
}

/* 表单组件通用样式 */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-label {
  font-size: 0.95rem;
  color: var(--gray-dark);
  font-weight: 500;
}

.form-input,
.form-textarea,
.form-select {
  padding: 0.75rem 1rem;
  border: 1px solid var(--gray-light);
  border-radius: 8px;
  font-size: 1rem;
  transition: var(--transition);
  background: var(--white);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: #9ca3af;
}

.form-input:hover,
.form-textarea:hover,
.form-select:hover {
  border-color: #9ca3af;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

.form-select {
  cursor: pointer;
}

/* 标签系统 */
.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.tag-badge {
  padding: 0.35rem 0.9rem;
  background: var(--blue-light);
  color: var(--blue-dark);
  border-radius: 20px;
  font-size: 0.85rem;
  transition: var(--transition);
}

.tag-badge:hover {
  background: #dbeafe;
}

.tag-input-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1rem;
}

.tag-input {
  flex: 1;
}

/* 按钮系统 */
.btn {
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition);
  font-size: 1rem;
  font-weight: 500;
}

.btn:active {
  transform: scale(0.98);
}

.tag-btn {
  background: var(--primary);
  color: var(--white);
}

.tag-btn:hover {
  opacity: 0.9;
}

.submit-btn {
  background: linear-gradient(45deg, #3b82f6, #60a5fa);
  color: var(--white);
  width: 100%;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.submit-btn:hover {
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3);
}

.submit-btn:active {
  transform: scale(0.98) translateY(1px);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}
</style>